<template>
<div>
  <div class="top">群</div>
  <div class="groupManger"
       v-for="(g,index) in groupList"
       :index="index+''"
       :key="index"
       @click="changeColor(index,g)" v-bind:class="{active: isRedIndex === index}">
    {{ g.groupAvatar }}{{ g.groupName }}
  </div>
</div>
</template>

<script>
import {listGroup} from "@/api/reporter/group";

export default {
  name: "GroupManger",
  data() {
    return {
      groupList: [],
      isRedIndex: -1,
      gList: {},
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询群组列表 */
    getList() {
      this.loading = true;
      listGroup(this.queryParams).then(response => {
        this.groupList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    changeColor(index,gList) {
      if (this.isRedIndex === index) {
        this.isRedIndex = -1;
      } else {
        this.isRedIndex = index;
        this.gList = gList;
        this.isColorIndex = -1;
        this.fList=null
      }
      this.$EventBus.$emit('changeColor',this.gList)
    }
  }
}
</script>

<style scoped>
.top{
  height: 50px;
  padding-left: 10px;
  line-height: 50px;
  border-bottom: black 1px solid;
}
.groupManger{
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.active {
  background-color: #98999D
}
</style>
